{% load static %}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

</head>

<body>


<!-- 数据表格开始 -->
<table class="layui-hide" id="dsrwresultTable" lay-data="id:dsrwresultTable" lay-filter="dsrwresultTable"></table>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" id="allDelete" lay-event="allDelete">批量删除</button>
</script>

{% csrf_token %}
<script type="text/javascript">
    layui.use(['form', 'layer', 'table', 'laytpl', 'laydate'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            laydate = layui.laydate;

        //渲染数据表格
        table.render({
            elem: '#dsrwresultTable'
            , url: "/selectdsrwresult/"
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code,    //解析接口状态
                    "count": res.count,  //解析数据长度
                    "page": res.page,   //当前页
                    "limit": res.limit,  //当前页数据条数
                    "data": res.data,  //解析数据列表
                    "pages": res.pages
                };
            }
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            , page: true
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , id: 'table'
            , defaultToolbar: ['filter']
            , title: '定时任务结果日志'
            , height: 'full-200'
            , cols:
                [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        // id  为数据库中字段名
                        , {field: 'id', title: '日志ID', width: 100, fixed: 'left', align: 'center', sort: true}
                        , {field: 'queue_name', title: '任务名称', width: 100, align: 'center'}
                        , {field: 'process_id', title: '任务进程ID', width: 150, align: 'center'}
                        , {field: 'publish_time_format', title: '任务执行时间', width: 250, align: 'center' }
                        , {field: 'dsrw_result',title: '任务执行结果日志',width: 800,align: 'center'}
                    ]
                ]

        });

        //监听头部工具栏事件
        table.on("toolbar(dsrwresultTable)", function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            switch (layEvent) {
                case 'allDelete':    // 批量删除
                    var checkStatus = table.checkStatus(obj.config.id)
                        , data = checkStatus.data; //获取选中的数据
                    //console.log(data)
                    if (checkStatus.data.length > 0) {  //有选择的的数据行
                        var ids = [];
                        //定义一个数组，用于存储选中行的id
                        //使用for循环将选中的数据信息保存在数组中
                        for (let i = 0; i < checkStatus.data.length; i++) {
                            ids[i] = checkStatus.data[i].id;  // 注意这里的id 字段
                        }
                        //实践证明，在这里ajax是不能向后台发送数组数据的，所以需要对数据进行转换，可以转换成字符串
                        var idsString = ids.join(",");//分隔符，用啥分割，在后台就用啥拆分。
                        //console.log(idsString)
                        //现在数组已经拿到了数据，那我下来就是看能否将数组传递给后台进行删除，删除之前进行判断确认
                        layer.confirm("确认删除这" + checkStatus.data.length + "条数据吗？", {
                            icon: 3,
                            title: "删除提示"
                        }, function (index) {
                            layer.open({
                                title: '删除信息'
                                , type: 1
                                , closeBtn: false
                                , area: '300px;'
                                , shade: 0.8
                                , id: 'LAY_layuipro'
                                , btn: ['保存', '取消']
                                , content: '是否删除'
                                , success: function (layero) {
                                    var btn = layero.find('.layui-layer-btn');
                                    var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                                    btn.find('.layui-layer-btn0').click(function () {
                                        $.ajax({
                                            //几个参数需要注意一下
                                            type: "post",  //方法类型
                                            url: "/dsrwresult_log_delete_all/",  // 跳转的url
                                            data: {
                                                "ids": idsString,
                                                'csrfmiddlewaretoken': csrf_token
                                            },
                                            dataType: "json",
                                            async: false,
                                            traditional: true,
                                            success: function (result) {
                                                // console.log(result.code)
                                                if (result.code == 200) {
                                                    layer.msg("删除成功");
                                                    setTimeout(function () {
                                                        //重新加载当前页面
                                                        location.reload();
                                                    }, 1000);
                                                } else (
                                                    layer.msg("删除失败")
                                                )
                                            }
                                        });
                                        //关闭弹出层页面
                                        layer.close(index);
                                    });
                                }
                            });
                        });
                    } else {
                        layer.msg("请选择删除的数据！");
                    }
            }
        });

    });

</script>
</body>
</html>
 